<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>分类</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../fonts/iconfont.css" />
		<link rel="stylesheet" href="../../css/style.css" />
	</head>

	<body ontouchstart>
		<div class="ui-content">
			<div class="ui-search-bar" id="searchBar">
				<form class="ui-search-bar__form">
					<div class="ui-search-bar__box">
						<i class="iconfont icon-sousuo"></i>
						<input type="search" class="ui-search-bar__input" id="searchInput" placeholder="搜索" required/>
						<a href="javascript:" class="ui-icon-clear iconfont icon-close-copy" id="searchClear"></a>
					</div>
					<label class="ui-search-bar__label" id="searchText">
                <i class="iconfont icon-sousuo"></i>
                <span>搜索</span>
            </label>
				</form>
				<a href="javascript:" class="ui-search-bar__cancel-btn" id="searchCancel">取消</a>
			</div>
			<div class="category-main">
				<div class="c-sidebar">
					<ul class="cate-nav">
						<li class="active">
							<a href="javascript:;">热款爆卖</a>
						</li>
						<li>
							<a href="javascript:;">潮鞋新包</a>
						</li>
						<li>
							<a href="javascript:;">优选好物</a>
						</li>
						<li>
							<a href="javascript:;">美妆护肤</a>
						</li>
						<li>
							<a href="javascript:;">热款爆卖</a>
						</li>
						<li>
							<a href="javascript:;">热款爆卖</a>
						</li>
						<li>
							<a href="javascript:;">热款爆卖</a>
						</li>
					</ul>
				</div>
				<div class="cate-scroll">
					<div class="cate-cells">
						<div class="cate-title">热款爆卖</div>
						<ul class="cate-goods">
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">潮鞋新包</div>
						<ul class="cate-goods">
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">优选好物</div>
						<ul class="cate-goods">
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">美妆护肤</div>
						<ul class="cate-goods">
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">优选好物</div>
						<ul class="cate-goods">
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">美妆护肤</div>
						<ul class="cate-goods">
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="cate-cells" style="display: none;">
						<div class="cate-title">美妆护肤</div>
						<ul class="cate-goods">
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面洁面洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods3.jpg" alt="">
									<div class="cate-tit">面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods4.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods1.jpg" alt="">
									<div class="cate-tit">面洁面洁面膜</div>
								</a>
							</li>
							<li>
								<a href="" class="cate-gbox">
									<img src="../../images/goods2.jpg" alt="">
									<div class="cate-tit">洁面</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
		<!--搜索-->
		<script type="text/javascript">
			$(function() {
				var $searchBar = $('#searchBar'),
					$searchText = $('#searchText'),
					$searchInput = $('#searchInput'),
					$searchClear = $('#searchClear'),
					$searchCancel = $('#searchCancel');

				function hideSearchResult() {
					$searchInput.val('');
				}

				function cancelSearch() {
					hideSearchResult();
					$searchBar.removeClass('ui-search-bar_focusing');
					$searchText.show();
				}

				$searchText.on('click', function() {
					$searchBar.addClass('ui-search-bar_focusing');
					$searchInput.focus();
				});
				$searchInput
					.on('blur', function() {
						if(!this.value.length) cancelSearch();
					});
				$searchClear.on('click', function() {
					hideSearchResult();
					$searchInput.focus();
				});
				$searchCancel.on('click', function() {
					cancelSearch();
					$searchInput.blur();
				});
			});
		</script>
	</body>

</html>